<template>
	<view class="container">
		<Navbar fixed />
		<view class="profile">
			<Person />
			<view class="history-title">
				Article
				<text class="path right-arrow" @click="goArticle"></text>
			</view>
			<scroll-view class="history-list" scroll-x="true">
				<view class="history-article" v-for="item in articles" :key="item.articleId" @click="goArticleDetail(item.articleId)">
					<image :src="item.articleCoverUrl" />
				</view>
			</scroll-view>

			<view class="history-title">
				Video
				<text class="path right-arrow"></text>
			</view>
			<scroll-view class="history-list" scroll-x="true">
				<view class="history-video" v-for="item in videos" :key="item.videoId" @click="goVideoDetail(item.videoId)">
					<image :src="item.videoCoverUrl" />
					<view class="history-video-introduce">{{ item.videoDesc }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
	<Tabbar />
</template>

<script setup name="History">
	import Navbar from '@/components/Navbar/Navbar.vue';
	import Person from '../components/person.vue';
	import Tabbar from '@/components/Tabbar/Tabbar.vue';
	import { ref } from 'vue';

	import { getArticleHistory, getVideoHistory } from '@/api/portfolio';
	import { navigateTo } from '@/utils';

	// const articles = ref([
	// 	{
	// 		id: 1,
	// 		img: '/static/imgs/profile/content.png',
	// 	},
	// 	{
	// 		id: 2,
	// 		img: '/static/imgs/profile/rectangle.png',
	// 	},
	// ]);

	// const videos = ref([
	// 	{
	// 		id: 1,
	// 		img: '/static/imgs/profile/video1.png',
	// 		text: `3 Habits The Wealthiest People Practice Daily That Most Others Don 't`,
	// 	},
	// 	{
	// 		id: 2,
	// 		img: '/static/imgs/profile/video2.png',
	// 		text: `How to not suck at design, a 5 minute guide for the non-designer.`,
	// 	},
	// 	{
	// 		id: 3,
	// 		img: '/static/imgs/profile/video3.png',
	// 		text: `The rise of crypto in higher education`,
	// 	},
	// ]);

	const articles = ref([]);
	const videos = ref([]);

	const goArticle = () => {};

	const getArticle = async () => {
		const res = await getArticleHistory();
		console.log('🚀 ~ getArticle ~ res:', res);
		articles.value = res.rows;
	};

	const getVideo = async () => {
		const res = await getVideoHistory();
		videos.value = res.rows;
	};

	const goArticleDetail = (id) => {
		navigateTo(`/pages/article/index?id=${id}&type=0`);
	};

	const goVideoDetail = (id) => {
		navigateTo(`/pages/article/index?id=${id}&type=1`);
	};

	getArticle();
	getVideo();
</script>

<style lang="scss" scoped>
	@import '../profile.scss';
</style>
